<template>
  <view class="container">
    <!--    {{info}}-->
    <view class="img-swiper-wrap">
      <u-swiper
          :list="bannerList"
          keyName="url"
          @click="bannerClick"
          indicator
          indicatorMode="line"
          circular
      ></u-swiper>
    </view>
    <view class="info-simple">
      <view class="simple-price">
        <text class="price">{{ info.price || "" }}</text>
        <text class="price-unit">元/月</text>
      </view>
      <view class="simple-title-wrap">
        <view class="simple-title">
          {{ info.title || "" }} {{ info.houseType || "" }}
        </view>
        <view class="simple-decoration-wrap">
          <text class="simple-decoration">{{ info.decoration || "" }}</text>
        </view>
      </view>
    </view>

    <view class="info-basic">
      <view class="basic-house-type">
        <text>{{ info.houseType || "" }}</text>
        <text>类型</text>
      </view>
      <view class="basic-area">
        <text>{{ info.area || "" }}</text>
        <text>面积</text>
      </view>
      <view class="basic-orientation">
        <text>{{ info.orientation || "" }}</text>
        <text>朝向</text>
      </view>
      <view class="basic-floor">
        <text>{{ info.floor || "" }}</text>
        <text>楼层</text>
      </view>
    </view>
    <view class="info-desc">
      <view class="desc-title">房源描述</view>
      <view class="desc-house-overview">
        <u-parse :content="info.houseOverview">

        </u-parse>
      </view>
    </view>
    <view class="info-house-config">
      <view class="config-title">房屋配置</view>
      <view class="config">
        <view v-for="item in configList" class="config-item">
          <image :src="getConfigImgSrc(item)" class="config-img"></image>
          <text :style="{color:getConfigNameColor(item)}" class="config-name">{{ item.name || "" }}</text>
        </view>
      </view>
    </view>
    <view class="info-plot-location">
      <view class="location-title">小区位置</view>
      <view class="location">
        <u-icon @click="goMap" name="map-fill"
                :label="info.plot"
                labelPos="right"
                color="rgb(246,115,97)"
                labelColor="rgb(170,170,170)"
                size="22"></u-icon>
        <!--        {{ info.plot ||""}}-->
      </view>
      <view class="map"></view>
    </view>
    <view class="info-detail">
      <view class="detail-title">其他信息</view>
      <view class="detail-row">
        <!--        <view class="detail-cell">-->
        <!--            <text>房屋编码</text>-->
        <!--            <text>{{info.houseNumber||""}}</text>-->
        <!--        </view>-->
        <view class="detail-cell">
          <text>出租日期</text>
          <text>{{ info.pushTime || "" }}</text>
        </view>

        <!--        <view class="detail-cell">-->
        <!--          <text>租期</text>-->
        <!--          <text>{{ info.zuTime ||""}}</text>-->
        <!--        </view>-->
      </view>
      <view class="detail-row">
        <view class="detail-cell">
          <text>租期</text>
          <text>{{ info.zuTime || "" }}</text>
        </view>
      </view>
      <view class="detail-row">
        <view class="detail-cell">
          <text>详细地址</text>
          <text>{{ info.fullAddress || "" }}</text>
        </view>
      </view>
    </view>
    <view class="opr">
      <view @click="fav()" class="fav">
        <u-icon :name="favoriteName" label="收藏" labelPos="bottom"
                :color="favoriteColor"
                :labelColor="favoriteColor"
                size="26"></u-icon>
      </view>
      <view class="call">
        <u-button @click="callShow()" text="电话联系"
                  type="primary"
                  color="rgb(240, 169, 160)"
        ></u-button>
      </view>
    </view>

    <u-popup :show="show" mode="bottom" @close="close" @open="open">
      <view class="call-panel">
        <view @click="call()" class="call-panel-phone">
          联系电话：{{ phone || "" }}
        </view>
        <view class="call-panel-line"></view>
        <view @click="show=false;" class="call-panel-close">
          <text>取消</text>
        </view>

      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  addMyFavorite,
  deleteMyFavorite,
  deleteMyFavoriteByUserIdAndHouseZuInfoId,
  getHouseInfo,
  getMyFavoriteList,
  getUserInfo
} from "@/config/api";
import {hasRequestProtocol} from "@/config/util/util";
import {checkLogin, getSelectedMapData} from "@/config/util/common";

export default {
  data() {
    return {
      // userInfo: this.$store.state.userInfo,
      info: {
        id: null,
        houseNumber: null,
        pushTime: null,
        area: null,
        orientation: null,
        floor: null,
        price: null,
        houseType: null,
        title: null,
        houseOverview: null,
        decoration: null,
        city: null,
        district: null,
        street: null,
        plot: null,
        fullAddress: null,
        imgUrls: null,
        houseConfig: null,
        zuTime: null,
        houseStatus: null,
        userId: null,
        lng: null, //经度
        lat: null, //纬度
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      },
      bannerList: [],
      configList: [
        {
          name: '洗衣机',
          status: false,
          selectedImgSrc: '/static/house-config/xiyiji-selected.png',
          imgSrc: '/static/house-config/xiyiji.png'
        },
        {
          name: '冰箱',
          status: false,
          selectedImgSrc: '/static/house-config/bingxiang-selected.png',
          imgSrc: '/static/house-config/bingxiang.png'
        },
        {
          name: '空调',
          status: false,
          selectedImgSrc: '/static/house-config/kongdiao-selected.png',
          imgSrc: '/static/house-config/kongdiao.png'
        }, {
          name: '床',
          status: false,
          selectedImgSrc: '/static/house-config/chuang-selected.png',
          imgSrc: '/static/house-config/chuang.png'
        }, {
          name: '热水器',
          status: false,
          selectedImgSrc: '/static/house-config/reshuiqi-selected.png',
          imgSrc: '/static/house-config/reshuiqi.png'
        }, {
          name: '衣柜',
          status: false,
          selectedImgSrc: '/static/house-config/yigui-selected.png',
          imgSrc: '/static/house-config/yigui.png'
        }, {
          name: '沙发',
          status: false,
          selectedImgSrc: '/static/house-config/shafa-selected.png',
          imgSrc: '/static/house-config/shafa.png'
        }
      ],
      show: false,
      phone: "", //房源发布者联系电话
      //收藏的颜色: 两个颜色常量
      favoriteColor: `rgb(170, 170, 170)`,
      favoriteName: `star`,
      favoriteColorNoSelectedConstant: `rgb(170, 170, 170)`,
      favoriteNameNoSelectedConstant: `star`,
      favoriteColorSelectedConstant: `rgb(240, 169, 160)`,
      favoriteNameSelectedConstant: `star-fill`,
      favoriteId: null, //收藏的id

    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    }
  },
  onLoad({id}) {
    // uni.$u.toast(id)
    this.requestHouseInfo(id);

  },
  onShow() {
    //获取选择地图的数据，及时清除
    const selectedMapData = getSelectedMapData();

  },
  methods: {
    //统一请求房源信息
    requestHouseInfo(id) {
      getHouseInfo(id).then(res => {
        this.info = res.data;

        //根据用户id，获取房源发布者电话
        getUserInfo(this.info.userId).then(({data}) => {
          this.phone = data.phonenumber;
        })

        if (this.userInfo) {
          //查询房源是否被收藏
          getMyFavoriteList({
            houseZuInfoId: this.info.id,
            userId: this.userInfo.userId
          }).then(favListRes => {

            if (favListRes.rows.length === 0) {
              this.favoriteColor = this.favoriteColorNoSelectedConstant;
              this.favoriteName = this.favoriteNameNoSelectedConstant;
              this.favoriteId = null;
              return;
            }
            this.favoriteColor = this.favoriteColorSelectedConstant;
            this.favoriteName = this.favoriteNameSelectedConstant;
            this.favoriteId = favListRes.rows[0].id;
          })
        }

        //轮播图处理
        this.bannerList = this.info.imgUrls
            .split("、").filter(url => url !== '').map(item => {
              if (hasRequestProtocol(item)) {
                return {
                  url: item
                }
              }
              return {
                url: this.$baseFileUrl + item
              }
            });

        //家具配置处理
        let names = this.info.houseConfig.split(",");
        this.configList = this.configList.map(c => {
          let exists = names.some(item => item === c.name);
          if (exists) {
            c.status = true;
          }
          return c;
        })
      })
    },
    //拨打电话
    call() {
      uni.makePhoneCall({
        phoneNumber: this.phone //仅为示例
      });

    },
    //去到地图
    goMap() {
      if (this.info.lng && this.info.lat) {
        uni.navigateTo({
          // url: '/pages/baidumap/baidumap?lng=116.331398&lat=39.897445'
          url: `/pages/baidumap/baidumap?lng=${this.info.lng}&lat=${this.info.lat}`
        })
      } else {
        uni.navigateTo({
          url: '/pages/baidumap/baidumap'
        })
      }
    },
    //收藏
    async fav() {
      if (!checkLogin(true)) {
        return;
      }

      if (this.favoriteName === this.favoriteNameNoSelectedConstant) {
        await addMyFavorite({
          houseZuInfoId: this.info.id,
          userId: this.userInfo.userId
        }).then(async ({msg}) => {
          uni.$u.toast("收藏成功")
          this.favoriteColor = this.favoriteColorSelectedConstant;
          this.favoriteName = this.favoriteNameSelectedConstant;

          //刷新页面数据
          // await this.requestHouseInfo(this.info.id);
        })
      } else {

        // await deleteMyFavorite(
        //     [this.favoriteId]
        // ).then(async () => {
        //   uni.$u.toast("取消收藏成功")
        //   this.favoriteColor = this.favoriteColorNoSelectedConstant;
        //   this.favoriteName = this.favoriteNameNoSelectedConstant;
        //
        //   //刷新页面数据
        //   await this.requestHouseInfo(this.info.id);
        //
        // })

        await deleteMyFavoriteByUserIdAndHouseZuInfoId(
            {
              userId: this.userInfo.userId,
              houseZuInfoId: this.info.id
            }
        ).then(async () => {
          uni.$u.toast("取消收藏成功")
          this.favoriteColor = this.favoriteColorNoSelectedConstant;
          this.favoriteName = this.favoriteNameNoSelectedConstant;

          //刷新页面数据
          // await this.requestHouseInfo(this.info.id);

        })
      }
    },
    callShow() {
      this.show = true;
    },
    open() {
      console.log('open');
    },
    close() {
      this.show = false
      console.log('close');
    },

    //轮播图点击
    bannerClick(index) {
      uni.navigateTo({
        url: '/subpages/houseimgbrowse/houseimgbrowse?id=' + this.info.id
      })
    },
    //获取颜色
    getConfigNameColor(config) {
      if (config.status) {
        return 'rgb(246,115,97)';
      }
      return 'rgb(170,170,170)';
    },
    //获取图片
    getConfigImgSrc(config) {
      if (config.status) {
        return config.selectedImgSrc;
      }
      return config.imgSrc;
    }
  }
}
</script>

<style lang="scss">

.container {
  justify-content: unset;
  flex-direction: column;
  align-items: unset;

  .img-swiper-wrap {

  }

  .info-simple {
    border-bottom: 1px solid $sys-color-grey-242;
    padding-bottom: $sys-padding-30;

    .simple-price {
      padding-left: $sys-padding-30;
      padding-top: $sys-padding-30;
      padding-right: $sys-padding-30;
      color: $sys-color-pink-weight;

      .price {
        font-size: 18px;
        margin-right: 5rpx;
      }

      .price-unit {
        letter-spacing: 5rpx;
      }
    }

    .simple-title-wrap {
      padding-left: $sys-padding-30;
      padding-top: $sys-padding-30;
      padding-right: $sys-padding-30;


      .simple-title {

      }

      .simple-decoration-wrap {
        margin-top: 5rpx;
        display: flex;
        font-size: 13px;


        .simple-decoration {
          background-color: $sys-color-grey-242;
          color: $sys-color-grey-170;
          padding: 5rpx;
          padding-left: 10rpx;
          padding-right: 10rpx;
        }
      }

    }

  }

  .info-basic {
    padding-top: $sys-padding-30;
    padding-left: $sys-padding-30;
    padding-right: $sys-padding-30;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid $sys-color-grey-242;

    text:nth-child(2) {
      font-size: 13px;
      color: $sys-color-grey-170;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
    }

    .basic-house-type {
      display: flex;
      flex-direction: column;
    }

    .basic-area {
      display: flex;
      flex-direction: column;
    }

    .basic-orientation {
      display: flex;
      flex-direction: column;
    }

    .basic-floor {
      display: flex;
      flex-direction: column;
    }
  }

  .info-desc {
    padding-top: $sys-padding-30;
    padding-left: $sys-padding-30;
    padding-right: $sys-padding-30;

    .desc-title {

    }

    .desc-house-overview {
      font-size: 13px;
      padding-top: 20rpx;
    }

  }

  .info-house-config {
    padding-top: $sys-padding-30;
    padding-left: $sys-padding-30;
    padding-right: $sys-padding-30;

    .config {
      padding-top: 20rpx;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .config-item {
        //width: calc(100% / 5);
        //width: calc(90% / 5);
        /* 定义每个元素的样式，比如宽度、高度、边距等 */
        flex: 0 0 20%; /* 让每个元素占据20%的宽度 */
        /* 其他样式 */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 20rpx;


        .config-img {
          width: 50rpx;
          height: 50rpx;
        }

        .config-name {
          font-size: 14px;
        }
      }

    }
  }

  .info-plot-location {
    padding-top: $sys-padding-30;
    padding-left: $sys-padding-30;
    padding-right: $sys-padding-30;

    .location-title {

    }

    .location {
      padding-top: $sys-padding-30;
      font-size: 14px;
      color: $sys-color-grey-170;
    }

    .map {
      display: none;
      width: 100%;
      height: 400rpx;
      background-color: $sys-color-grey-242;
    }

  }

  .info-detail {
    padding-top: $sys-padding-30;
    padding-left: $sys-padding-30;
    padding-right: $sys-padding-30;
    padding-bottom: $sys-margin-bottom-200;

    .detail-title {

    }

    .detail-row {
      padding-top: 20rpx;
      display: flex;
      flex-direction: row;
      font-size: 13px;
      justify-content: space-between;
      color: $sys-color-grey-170;

      .detail-cell {
        text:first-child {
          margin-right: 10rpx;
        }
      }

    }
  }

  .opr {
    position: fixed;
    width: calc(100% - (30rpx * 2));
    bottom: 0;
    padding-left: $sys-padding-30;
    padding-right: $sys-padding-30;
    padding-bottom: $sys-padding-30;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: $sys-color-white;

    .fav {
      margin-right: 30rpx;
    }

    .call {
      flex-grow: 1;


    }
  }

  .call-panel {
    font-size: 14px;
    text-align: center;

    .call-panel-phone {
      padding-top: $sys-padding-40;
      padding-bottom: $sys-padding-40;
    }

    .call-panel-line {
      height: 10rpx;
      background-color: rgba(121, 121, 121, 0.5);
    }

    .call-panel-close {
      padding-top: $sys-padding-40;
      padding-bottom: $sys-padding-40;
    }
  }

}

</style>
